
<template>
	<view class="container">
		<view class="header">
			<view class="" @tap="get_Location()">
				<image src="@/static/position.png" mode=""></image>
				<text>{{CityName}}</text>
			</view>
			<view class="">
				<image src="@/static/refresh_index.png" mode=""></image>
				<text>刷新</text>
			</view>
		</view>
		<!-- 宫格菜单 -->
		<view class="menu">
			<view class="" v-for="(item,index) in serviceType" :key="index" @click="toMenu(index)">
				<navigator :url="item.url+'?id='+item.id">
					<image :src="item.icon" mode="aspectFill"></image>
					<view class="menu_title">
						{{item.name}}
					</view>
				</navigator>
			</view>
		</view>

		<!-- 附近加油站菜单展示的 -->
		<view class="near">
			<text>附近加油站</text>
			<view @click="toRefuelNearby">
				全部<uni-icons type="right" size="15" color="#1D6FFF"></uni-icons>
			</view>
		</view>

		<!-- 地图的 -->
		<view class="map1">
			<hchPosition :storeData="storeData" :markers="markers"></hchPosition>
		</view>
		<!-- 附近加油站菜单展示的 -->
		<view class="group_buy">
			<text>优惠团购</text>
			<view>
				全部<uni-icons type="right" size="15" color="#1D6FFF"></uni-icons>
			</view>
		</view>
		<!-- 团购list -->
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<image :src="item.image" mode=""></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<zw-tabbar :defaultSel="0" @clickTab="clickTab" :bigIdx="1"></zw-tabbar>
	</view>
</template>
<!-- pages/refuelNearby/refuelNearby -->
<script>
	import hchPosition from "../../wxcomponents/hch-position/hch-position"
	export default {
		data() {
			return {
				serviceType: [],
				CityName: '北京天安门广场',
				latitude: 40.44209,
				longitude: 116.33332742,
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				list: [{
					image: '../../static/c1.png',
					name: '优惠团购1'
				}, {
					image: '../../static/c1.png',
					name: '优惠团购1'
				}, {
					image: '../../static/c1.png',
					name: '优惠团购1'
				}, {
					image: '../../static/c1.png',
					name: '优惠团购1'
				}, {
					image: '../../static/c1.png',
					name: '优惠团购2'
				}, {
					image: '../../static/c1.png',
					name: '优惠团购3'
				}],
				storeData: [ //门店信息展示  id name address tel 必填
					{
						id: 1,
						name: '门店XXXXX1号',
						address: '厦门市思明区汇景商业广场XXX1号',
						tel: '12345678900',
					}, {
						id: 2,
						name: '门店XXXXX2号',
						address: '厦门市思明区汇景商业广场XXX2号',
						tel: '12345678900',
					},
				],
				markers: [ //门店在地图上的标记 以下字段必填 
					{
						id: 1,
						latitude: 39.9086933,
						longitude: 116.393477,
						iconPath: '../../static/门店.png',
						callout: {
							content: "门店XXXXX1号店",
							borderRadius: 10,
							padding: 10,
							display: "ALWAYS",
						}
					}, {
						id: 2,
						latitude: 39.9086933,
						longitude: 116.39487,
						iconPath: '../../static/门店.png',
						callout: {
							content: "门店XXXXX2号店",
							borderRadius: 10,
							padding: 10,
							display: "ALWAYS",
						}
					}
				],
			}
		},
		onLoad() {
			this.getServiceType();
			this.getLocationAuth();
		},
		components: {
			hchPosition,
		},
		methods: {
			getServiceType() {
				uni.request({
					url: 'http://localhost/dev-api/business/serviceType/list',
					method: 'GET',
					header: {
						'authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjlkOWUxM2I4LTM2YTYtNGFkNC05YWIwLWE0NTlkZmNhZDhkYSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.YiNT6iNJScBfwz_PyLQRHJl12hN2drZpRgFmhQK_lQBubGh879h87d_Wh6lxgeTzyMLeYcOtwd1gz6Hze1jUMQ'
					},
					success: (resp) => {
						console.log('resp=', resp.data.rows),
							this.serviceType = resp.data.rows;
						console.log('this.serviceType=', this.serviceType)
					}
				})
			},
			//获得城市缓存
			getCityName() {
				let _that = this;
				setTimeout(function() {
					uni.getStorage({
						key: 'City_Name', //温馨提示：这是一个没什么用的提示，你不要看，看了你就是小猪！！！
						success(res) {
							_that.CityName = res.data
						}
					})
				}, 500)
			},
			//跳转页面
			get_Location() {
				uni.navigateTo({
					url: '/pages/index/Location/Location'
				})
			},
			//获取定位
			getLocationAuth() {
				let that = this;
				uni.getLocation({
					success(res) {
						console.log(res);
						let lat = res.latitude;
						let lng = res.longitude;
						var key =
							'myKey UZEBZ-V2F3L-TDTPU-EP65I-CPZWK-OABGB'; //申请地址：https://lbs.qq.com/dev/console/application/mine
						uni.request({
							url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + lat +
								',' + lng + '&key=M7XBZ-2TBKJ-TPBFS-KV3RM-F5QQF-OFFNV',
							method: "GET",
							success(ress) {
								console.log(ress);
								let data = ress.data; //获取到所有定位的数据
								let CityName = ress.data.result.address;
								console.log(ress)
								uni.setStorage({
									key: 'City_Name',
									data: CityName
								})
							},
							fail() {
								uni.showToast({
									'title': '对不起，数据获取失败！',
									'icon': 'none'
								})
							}
						})
					},
					fail(res) {
						uni.showToast({
							'title': '对不起，获取位置失败！',
							'icon': 'none'
						})
					}
				})
			},
			clickTab(idx) {
				this.tabBarIdx = idx;
			}
		},
		onShow() {
			this.getCityName()
		},
	}
</script>

<style scoped>
	.container {
		height: 100%;
		padding-bottom: 60rpx;
		background-color: white;
	}

	/* 头部定位的 */
	.header {
		font-size: 28rpx;
		padding: 10rpx 20rpx 0 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.header image {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
	}

	.header text {
		height: 40rpx;
		font-size: 28rpx;
		line-height: 40rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding-left: 10rpx;
		vertical-align: middle;
	}

	/* 宫格的 */
	.menu {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.menu>view {
		padding: 10rpx 5rpx;
	}

	.menu image {
		width: 180rpx;
		height: 160rpx;

	}

	.menu_title {
		font-size: 15rpx;
		text-align: center;
		margin-top: -10rpx;
	}

	/* 附近查看更多 */
	.near,
	.group_buy {
		color: black;
		font-weight: bold;
		padding: 30rpx 20rpx 20rpx 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.near view,
	.group_buy view {
		color: #1D6FFF;
	}

	.map1 {
		height: 400rpx;
	}

	/* 优惠团购的额 */
	.list {
		padding-bottom: 150rpx;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		justify-content: left;
	}

	.item {
		border: 2rpx solid #C3C3C3;
		margin: 20rpx 0 0 30rpx;
	}

	.item image {
		width: 326rpx;
		height: 180rpx;
	}

	.item text {
		text-align: center;
		display: block;
	}

</style>